<template>
  <!-- 搜索条件 -->
  <view class="w-686rpx m-a flex-sb-center pl-32rpx pr-32rpx pt-30rpx pb-30rpx"
    :class="[searchBoxClass]"
  >
    <view class="search-wrap w-305rpx h-64rpx flex-sb-center bg-white rounded-full box-border"
      :class="[{ 'dark-color2': themeConfig.theme === 'dark' }, searchWrapClass]"
    >
      <view class="flex-center" @click="handleSearch">
        <i class="iconfont icon-sousuo font-size-26rpx color-#BBB"></i>
      </view>
      <view class="w-200rpx relative input-box"
        :class="[inputWrapClass]"
      >
        <wd-input 
          class="w-full !h-60rpx" 
          type="text" 
          v-model="searchValue" 
          :placeholder="placeholder" 
          @confirm="handleConfirm"
        />
      </view>
      <!-- <view class="color-#9C6DEF flex-center font-size-24rpx" @click="handleClear">
        <i class="iconfont icon-close mr-6rpx inline-block font-size-22rpx"></i>
        <view class="inline-block leading-0">清空</view>
      </view> -->
    </view>
    <view class="h-60rpx flex-center search-btn" @click="handleShowCity">
      <slot name='address'></slot>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useThemeStore } from '@/store';
const emit = defineEmits(['handleSearch', 'handleConfirm', 'handleShowCity', 'handleClear'])
const props = defineProps({
  searchWrapClass: {
    type: String,
    default: 'pl-24rpx pr-24rpx'
  },
  inputWrapClass: {
    type: String,
    default: ''
  },
  placeholder: {
    type: String,
    default: '搜索ID'
  },
})
// 主题颜色
const { themeConfig } = useThemeStore();

// 搜索框值
const searchValue = ref('');
const handleSearch = () => {
  emit('handleSearch', searchValue.value)
}
const handleConfirm = () => {
  emit('handleConfirm', searchValue.value);
}
const handleShowCity = () => {
  emit('handleShowCity', searchValue.value);
}
const handleClear = () => {
  searchValue.value = '';
  emit('handleClear');
}

const searchBoxClass = ref('');
// #ifdef MP-WEIXIN
// searchBoxClass.value = 'search-box';
// #endif
</script>

<script lang="ts">
export default {
  // 微信小程序开启样式穿透
  options: { styleIsolation: "shared" },
};
</script>

<style lang="scss" scoped>
// 搜索框 start
.search-wrap {
  box-shadow: 0 4rpx 18rpx 0 rgba(0, 0, 0, 0.04);
}
:deep(.wd-input__inner),
:deep(.wd-input__value),
:deep(.wd-input__body) {
  height: 60rpx !important;
}
:deep(.wd-input::after) {
  background: none !important;
}
// 搜索框 end

.search-box {
  justify-content: flex-start !important;
  padding-top: 0 !important;

  .search-wrap {
    padding-left: 20rpx !important;
    padding-right: 20rpx !important;
    width: 340rpx !important;
  }

  .input-box {
    width: 175rpx !important;
  }
}
</style>
